<style scoped lang="scss">
.content {
    width: 100%;
    height: 100%;
    // position: relative;
    display: flex;

    .img1 {
        position: absolute;
        z-index: 999;
        width: 100%;
        height: 620px;
    }

    .img2 {
        position: absolute;
        left: 50%;
        top: 52%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        width: 90%;
        height: 550px;
    }

    .xiao {
        z-index: 99999;
        position: absolute;
        left: 50%;
        top: 52%;
        transform: translate(-50%, -50%);
        width: 250px;
        height: 500px;
        // background: #ccc;
        .top {
            width: 100%;
            height: 200px;
            // background: red;

            p {
                font-size: 20px;
                color: #000;
                text-align: center;
                line-height: 50px;
            }

            .ma {
                width: 150px;
                height: 50px;
                margin: auto;
                background: #ccc;
                display: flex;

                span {
                    font-size: 20px;
                    color: #000;
                    text-align: center;
                    line-height: 50px;
                    margin: auto;
                }
            }
        }
    }
}
</style>
<template>
    <homeTop :showicon1="false" :showbar4="true" :showicon2="true"></homeTop>
    <div class="content">
        <!-- <el-button @click="onma">点击生成邀请码</el-button>
        <el-button @click="oncha">点击查询</el-button> -->
        <img class="img1" src="../../assets/images/image/xxhdpi/invitation_bg.png" alt="">
        <img class="img2" src="../../assets/images/image/xxhdpi/invitation_white_bg.png" alt="">
        <div class="xiao">
            <div class="top">
                <p>您的邀请码</p>
                <div class="ma">
                    <span>{{ InvitecheckData }}</span>
                </div>
                <br>
                <p>
                    <a href="#" @click="onma">获取您的邀请码</a>
                </p>
            </div>
            <hr>
            <div class="btm">
                <!-- <img src="../../images/ma.png" alt=""> -->
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { getInvite, getInvitecheck } from '@/api';
import homeTop from '@/components/homeTop/index.vue'
import { ref } from 'vue';
import { ElMessage } from 'element-plus'
const userId = ref(JSON.parse(localStorage.getItem('userId') as string))
const sessionId = ref(JSON.parse(localStorage.getItem('sessionId') as string))
const InvitecheckData = ref('')
console.log(userId.value, 'userId');
console.log(sessionId.value, 'sessionId');

const onma = () => {
    getInvite(userId.value, sessionId.value).then((res) => {
        const { message } = res.data
        ElMessage.success('已生成您的专属邀请码')
        console.log(res, '邀请码')
    })
    setTimeout(() => {
        getInvitecheck(userId.value, sessionId.value).then(res => {
            InvitecheckData.value = res.data.result
            console.log(res.data.result, '查询邀请码');
        })
    }, 1000)
}
// const oncha = () => {

// }
</script>